<template>
	<view class="att-box">
		<view class="title">
			请选择适合该产品的属性进行填写，也可自定义添加属性
		</view>
		<view class="active-title" v-for="(item,index) in attArr">
			<view class="active-top">
				{{item.title}}
			</view>
			<view class="active-right">
					<u--input placeholder="点击填写" inputAlign="right" v-model="item.value" border="none"></u--input>
			</view>
		</view>
		<view class="add-by-you" >
			<img @click="addByYou" src="https://file.casugn.com/storecompcard//6pVKblZaCHSy0ad323da8561ea4820e92cce09b05474_1661331982211.png" alt="">
			<text @click="addByYou">自定义添加属性</text>
		</view>
		
		<u-popup :show="addShow" @close="close" closeOnClickOverlay >
			<view class="add-box">
				<view class="add-title">
					<text class="add-cancel" @click="addCancel">取消</text>
					<text class="add-att-title">添加属性</text>
					<text class="add-sava" @click="addSave">保存</text>
				</view>
				<view class="add-att">
					<view class="add-left">
						属性标题
					</view>
					<view class="add-right">
						<u--input placeholder="点击填写" maxlength="10" fontSize="30" v-model="attTitle" @change="attTitleChange" border="none"></u--input>
					</view>
					<view class="add-att-length">
						<text :class="attTitleNotNull?'att-active':'att-not-active'">{{attTitleNum}}</text><text>/10</text>
					</view>
				</view>
				<view class="add-att">
					<view class="add-left add-left1">
						<text>内</text><text>容</text>
					</view>
					<view class="add-right">
						<u--input placeholder="点击填写" maxlength="10" fontSize="30" v-model="attCont" @change="attContChange" border="none"></u--input>
					</view>
					<view class="add-att-length">
						<text :class="attContNotNull?'att-active':'att-not-active'">{{attContNum}}</text><text>/10</text>
					</view>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				attArr:[
					{
						title:"品牌",
						value:''
					},
					{
						title:"货号",
						value:''
					},
					
					{
						title:"型号",
						value:''
					},
					{
						title:"类型",
						value:''
					},
					{
						title:"材质",
						value:''
					},
					{
						title:"功能",
						value:''
					},
					{
						title:"用途范围",
						value:''
					},
					{
						title:"尺寸",
						value:''
					},
					{
						title:"是否加工定制",
						value:''
					},
				],
				addShow:false,
				attTitle:'',//属性
				attTitleNotNull:false,//属性是否为空
				attTitleNum:0,//属性长度
				attCont:'',//内容
				attContNotNull:false,//属性是否为空
				attContNum:0,//属性长度
			};
		},
		methods:{
			addByYou(){
				this.addShow=true
			},
			close(){
				this.addShow=false
			},
			attTitleChange(val){
				console.log(val.length)
				if(val){
					this.attTitleNotNull=true
					this.attTitleNum=val.length
				}else{
					this.attTitleNotNull=false
					this.attTitleNum=0
				}
			},
			attContChange(val){
				console.log(val.length)
				if(val){
					this.attContNotNull=true
					this.attContNum=val.length
				}else{
					this.attContNotNull=false
					this.attContNum=0
				}
			},
			// 取消
			addCancel(){
				this.attTitle=''
				this.attTitleNum=0
				this.attCont=''
				this.attContNum=0
				this.addShow=false
			},
			addSave(){
				let data={
					title:this.attTitle,
					value:this.attCont
				}
				this.attArr.push(data)
				this.addShow=false
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.att-box{
		position: relative;
		padding-bottom: 150upx;
		padding-left: 20upx;
		padding-right: 20upx;
		.title{
			background: #fff4e7;
			color:#ff8802;
			line-height: 80upx;
			text-align: center;
			font-size: 26upx;
		}
		.active-title{
			display: flex;
			justify-content: space-between;
			padding: 20upx;
			border-bottom: 1px solid #f6f6f6;
			.active-right{
				 width: 150upx;
				 text-align: right;
			}
		}
		.add-by-you{
			color: #26a5ff;
			display: flex;
			margin-top: 10upx;
			img{
				width: 30upx;
				height: 30upx;
				position: relative;
				top: 10upx;
			}
			text{
				margin-left: 5upx;
			}
		}
	
		.add-box{
			padding: 30upx;
			
			.add-title{
				display: flex;
				justify-content:space-between;
				border-bottom: 1px solid #f6f6f6;
				padding-bottom: 20upx;
				.add-cancel{
					font-size: 28upx;
					color: #757575;
				}
				.add-att-title{
					font-size: 32upx;
					font-weight: bold;
				}
				.add-sava{
					font-size: 28upx;
					color: #2693ff;
				}
			}
			.add-att{
				display: flex;
				border-bottom: 1px solid #f6f6f6;
				align-items: center;
				padding: 20upx;
				position: relative;
				.add-left{
					width: 130upx;
					text-align:justify;
					text-justify:inter-ideograph;
				}
				.add-left1{
					display: flex;
					justify-content: space-between;
				}
				.add-right{
					margin-left: 15upx;
				}
				.add-att-length{
					position: absolute;
					right: 0;
					top: 25upx;
					font-size: 26upx;
					color: #999999;
					.att-active{
						color: #2693ff;
					}
					.att-not-active{
						color: #999999;
					}
				}
			}
		}
	}
</style>
